<nz-modal
  [nzVisible]="showVariableDialog()"
  (nzVisibleChange)="toggleVariableDialog.emit($event)"
  [nzTitle]="modalTitle"
  [nzContent]="modalContent"
  [nzFooter]="modalFooter"
  (nzOnCancel)="toggleVariableDialog.emit(false)"
>
  <ng-template #modalTitle>
    <div class="app-dialog-header">
      <div class="app-dialog-title">{{ 'VARIABLES_TEXT' | translate }}</div>
      {{ 'SET_VARIABLES_DIALOG_SUBTEXT' | translate }}
    </div>
  </ng-template>

  <ng-template #modalContent>
    <div class="app-dialog-body">
      <app-variables-editor
        [variables]="variables()"
        (variablesChange)="variablesChange.emit($event)"
      />
    </div>
  </ng-template>

  <ng-template #modalFooter>
    <div class="app-dialog-footer">
      <button
        type="button"
        class="btn btn--primary right"
        track-id="close_set_variables_dialog"
        (click)="toggleVariableDialog.emit(false)"
      >
        {{ 'SAVE_BUTTON' | translate }}
      </button>
    </div>
  </ng-template>
</nz-modal>
